<template>
  <div class="app-container">
    <el-popover placement="left" trigger="hover" class="popover" @show="showPopover">
            <div style="display: flex; justify-content: space-between;align-items: center;">
                <el-checkbox v-model="checkAll" @change="checkAllChangeFn">列展示</el-checkbox>
                <el-button type="text" @click="reset(true)">重置</el-button>
            </div>
            <el-divider></el-divider>
            <el-checkbox-group v-model="checkColumns" @change="changeColumns">
                <el-checkbox v-for="(item, index) in columns" :key="index" :label="item.label"></el-checkbox>
            </el-checkbox-group>
            <i class="el-icon-s-tools" slot="reference"></i>
        </el-popover>

    <el-table ref="table" id="table" v-loading="loading" :data="relationListList" border style="width: 100%; margin: 20px 0;">
      <template v-for="item in columns">
        <el-table-column v-if="showColumn(item.prop)" :prop="item.prop" :label="item.label" :key="item.id" sortable/>
      </template>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listRelationList } from "@/api/system/subjectList";

export default {
  name: "Relation",
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 同一条关联关系上的节点信息表格数据
      relationListList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        subjectId: undefined,
        startNodeId: undefined,
        startNodeName: undefined,
        endNodeId: undefined,
        endNodeName: undefined,
        type: undefined,
        labelText: undefined,
        searchKey1: undefined,
        searchKey2: undefined,
      },
      columns: [
        { label: '开始节点Id', prop: 'startNodeId', isShow: false },
        { label: '开始节点名称', prop: 'startNodeName', isShow: true },
        { label: '结束节点Id', prop: 'endNodeId', isShow: false },
        { label: '结束节点名称', prop: 'endNodeName', isShow: true },
        { label: '关联关系', prop: 'type', isShow: true },
        { label: '关系描述', prop: 'labelText', isShow: true },
        { label: '搜索关键词1', prop: 'searchKey1', isShow: true },
        { label: '搜索关键词2', prop: 'searchKey2', isShow: true },
      ],
      checkColumns: [],
      checkAll: false,
    };
  },
  computed: {
        bindTableColumns() {
            return this.tableColumns.filter((column) => column.show);
        },
        bindTableColumns1: {
            get() {
                return this.tableColumns.filter((column) => column.show);
            },
            set(value) {
 
            }
        },
        /* 这里使用了getter和setter，这样写的好处是不用自己手动监听复选框的选中事件 */
        checkedTableColumns: {
            get() {
                // 返回选中的列名
                return this.bindTableColumns.map(column => column.prop);
            },
            set(checked) {
                // 设置表格列的显示与隐藏
                this.tableColumns.forEach(column => {
                    // 如果选中，则设置列显示
                    if (checked.includes(column.prop)) {
                        column.show = true;
                    } else {
                        // 如果未选中，则设置列隐藏
                        column.show = false;
                    }
                })
            }
        }
    },
  created() {
    this.queryParams.subjectId = this.$route.query.subjectId;
    this.getList();
  },
  methods: {
    // 全选复选框事件监听
    checkAllChangeFn(val) {
      if (val) {
          // 全选
          this.reset(true);
      } else {
          // 反全选
          this.reset(false);
      }
    },
    // 重置，flag: Boolean，全部重置为flag
    reset(flag) {
      this.columns.forEach(item => {
          item.isShow = flag;
      })
      this.showPopover();
      this.refreshTable();
    },
    // 表格列是否显示的方法
    showColumn(currentColumn) {
        return this.columns.find(item => item.prop == currentColumn).isShow;
    },
    /* 选择列 */
    changeColumns(val) {
        this.columns.forEach(item => {
            item.isShow = false;
        })
        // columns将val数组存在的值设为true，不存在的设为false
        val?.forEach(item => {
            let current = this.columns.find(i => i.label == item)
            current.isShow = true;
        })
        // 判断是否全选
        this.judgeIsCheckAll();
        this.refreshTable();
    },
    // 重新渲染表格
    refreshTable() {
        this.$nextTick(() => {
            this.$refs.table.doLayout();
        })
    },
    // 气泡框出现
    showPopover() {
        this.checkColumns = []
        this.columns.forEach(item => {
            if (item.isShow) {
                this.checkColumns.push(item.label)
            }
        })
        // 判断是否全选
        this.judgeIsCheckAll();
    },
    // 判断是否全选
    judgeIsCheckAll() {
        // 选中的长度 = 表格列的长度  全选按钮就选中
        if (this.checkColumns.length == this.columns.length)
            this.checkAll = true
        else
            this.checkAll = false
    },
    /** 查询同一条关联关系上的节点信息列表 */
    getList() {
      this.loading = true;
      listRelationList(this.queryParams).then(response => {
        this.relationListList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }
};
</script>

<style scoped>
/* 分割线 */
.el-divider {
    margin: 10px 0;
}
 
/* 复选框 */
.el-checkbox-group {
    display: flex;
    flex-direction: column;
}
 
/* 操作列图标位置 */
.popover {
    display: flex;
    justify-content: flex-end;
    font-size: 30px;
}
</style>